<template>
  <div class="order_simple">
    <header class="top_bar hd">
      <a @click="gotoPage()" class="icon_back"></a>
      <h3 class="cartname">{{type}}</h3>
    </header>

    <main class="order_box">

      <div class="share_quality_left not_eng_box">

        <ul>

          <li v-for="(item, i) in orderList" :key="item.id" :class="(i === orderList.length-1)?'demo':''">
            <router-link :to="{name: 'OrderDetail', params: {id: item.id, status: status, orderSn: item.orderSn }}" class="tabItem">
              <span class="db">订单编号：{{item.orderSn}}</span>
              <span class="zt">{{item.orderStatusText}}</span>
              <div class="zl" v-for="gitem in item.goodsList" :key="gitem.id">
                <img v-lazy="gitem.picUrl" alt="" class="not_eng_pic lazy-img-fadein img_1">
                <span class="mc">{{gitem.goodsName}}</span>
                <span class="sl">共{{gitem.number}}件商品</span>
                <span class="jg">实付：
                  <span style="color:#ff0003">￥{{item.actualPrice}}</span>
                </span>
              </div>
            </router-link>
            <!-- <div class="td_1"></div> -->

          </li>
          <div class="cass"></div>
        </ul>
        </div>
        <span>{{message}}</span>


    </main>
  </div>
</template>
<script>
export default {
  mounted() {
    var status = this.$route.params.status
    if (status === '0') {
      this.type = '全部订单'
    } else if (status === '1') {
      this.type = '待付款'
    } else if (status === '2') {
      this.type = '已付款'
    } else if (status === '3') {
      this.type = '待收货'
    } else if (status === '4') {
      this.type = '已收货'
    }

    this.fetchData(status)
  },
  data() {
    return {
      orderList: [],
      type: 0,
      message: '',
      status: this.$route.params.status
    }
  },
  watch: {
    $route(to) {
      var reg = /order\/\d+/
      if (reg.test(to.path)) {
        var status = this.$route.params.status || 0
        this.fetchData(status)
      }
    }
  },
  methods: {
    gotoPage() {
      var _this = this
      _this.$router.push('/Mine')
    },
    fetchData(status) {
      var _this = this
      let uObj = JSON.parse(window.sessionStorage.userInfo)
      let userId = uObj.id
      _this.$http
        .get('/mechanismadmin/mobile/order', {
          params: {
            userId: userId,
            status: status
          }
        })
        .then(
          res => {
            _this.orderList = res.data.data.data
            if (_this.orderList == null || _this.orderList == '') {
              _this.message = '还没有任何订单呢'
            }
          },
          err => {
            console.log(err)
          }
        )
    }
  }
}
</script>
<style>
@import '../assets/css/order.css';
</style>